<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>张三-个人网站</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="keywords" content="前端开发,JavaScript,HTML,CSS,响应式设计,移动端开发,Web开发,用户体验,交互设计,网站优化,SEO,技术交流,项目经验,个人简介,程序员,技术文章,摄影,旅行,合作意向">
    <style>
      /* 样式表 */
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
      }
      header {
        background-color: #333;
        color: #fff;
        padding: 20px;
        text-align: center;
      }
      h1 {
        margin: 0;
      }
      img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
      }
      .intro {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        text-align: justify;
      }
      .photos {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .photo {
        width: 30%;
        margin-bottom: 20px;
      }
      .photo img {
        max-width: 100%;
      }

      .avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        margin: 0 auto; 
      }
    </style>
  </head>
  <body>
    <header>
      <img src="https://images.unsplash.com/photo-1566492031773-4f4e44671857?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80" class="avatar" alt="头像" />
      <h1>张三同学</h1>
    </header>
    <div class="intro">
      <p>我是一名热爱编程的程序员，喜欢探索新技术和解决问题。我擅长使用JavaScript和Java进行开发，熟悉前端和后端开发，具有丰富的项目经验。我喜欢阅读技术文章和参加技术交流活动，不断学习和提升自己的技能。除了编程，我还喜欢旅行和摄影，喜欢记录美好的瞬间。如果你有任何问题或合作意向，欢迎联系我。</p>
    </div>
    <div class="photos">
      <div class="photo">
        <img
          src="https://images.unsplash.com/photo-1675332988633-26ba617fcba4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
          alt="照片1"
        />
      </div>
      <div class="photo">
        <img
          src="https://images.unsplash.com/photo-1675332980948-f61388f52827?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
          alt="照片2"
        />
      </div>
      <div class="photo">
        <img
          src="https://images.unsplash.com/photo-1677094507577-847bd84259b1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
          alt="照片3"
        />
      </div>
      <div class="photo">
        <img
          src="https://images.unsplash.com/photo-1677094521831-445c675dae7b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
          alt="照片4"
        />
      </div>
      <div class="photo">
        <img
          src="https://images.unsplash.com/photo-1675686779410-3c2223174c89?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
          alt="照片5"
        />
      </div>
      <div class="photo">
        <img
          src="https://images.unsplash.com/photo-1675686708767-a2b5f8be5a53?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
          alt="照片6"
        />
      </div>
    </div>
  </body>
</html>
